<template>
  <div class="homepage-header flex mb-4" :class="store.isFlag ? '' : 'flex-col'">
    <div class="w-50 h-50 border-1 p-1 yu-color-text mr-4">
      <img class="w-full h-full" :src="userInfoHeader?.profile?.avatarUrl" alt="">
    </div>
    <ul class="flex-1">
      <li class="flex" :class="store.isFlag ? 'items-center' : 'flex-col'">
        <div class="flex items-center">
          <span class="text-2xl font-bold ">{{ userInfoHeader?.profile?.nickname }}</span>
          <span class="w-20 w-10 mr-2 ml-2" v-if="myselfOrOther">
            <img class="w-full h-full" :src="store?.getVipInfoGetters?.redVipDynamicIconUrl" alt="">
          </span>
          <span class="border-2 rounded-full w-10 text-center yu-color-text yu-color-text ml-2 text-sm italic">
            Lv.{{ userInfoHeader?.level }}
          </span>
          <span class="text-2xl ml-2" v-if="userInfoHeader?.profile?.gender !== 0">
            <span v-if="userInfoHeader?.profile?.gender === 1" class="i-mdi-gender-male inline-block yu-titleColor" />
            <span v-if="userInfoHeader?.profile?.gender === 2" class="inline-block i-mdi-gender-female yu-color-text" />
          </span>
        </div>
        <div class="flex  flex-1" :class="store.isFlag ? 'justify-end' : 'mt-2 mb-2'">
          <YuButton padding="1px 10px" margin="0 4px" v-if="!myselfOrOther" @click="sendTextFn"> 
            <div class="flex items-center">
              <span class="i-mdi-email mr-2"/>
              <span>发送私信</span>
            </div>
          </YuButton>
          <YuButton padding="1px 10px" v-if="!myselfOrOther && store.token" @mouseleave="mouseleave" @mousemove="mousemove" @click="attentionUser">
            <div class="flex items-center" v-if="!userInfoHeader?.profile?.followTime" >
              <span class="text-xl">+</span>
              <span>关注</span>
            </div>
            <div v-else>
              <span v-if="!isAttention">{{ userInfoHeader?.profile?.followTime }}</span>
              <span v-else>取消关注</span>
            </div>
          </YuButton>
          <YuButton padding="1px 10px" margin="0 4px" v-if="myselfOrOther" @click="JumpUpdate">
            <div class="flex items-center">
              <span>编辑个人资料</span>
            </div>
          </YuButton>
          <YuButton padding="1px 10px" margin="0 4px" v-if="userInfoHeader?.profile?.artistName">
            <div class="flex items-center">
              <span>查看歌手页</span>
            </div>
          </YuButton>
        </div>
      </li>
      <li v-if="userInfoHeader?.profile?.mainAuthType" class="mb-2">
        <span class="inline-block mr-2">
          {{ userInfoHeader?.profile?.mainAuthType.desc }}
        </span>
        <span v-for="(tag, index) in userInfoHeader?.profile?.mainAuthType?.tags" :key="index">
          <span class="border-1 mr-2 p-1 text-xs yu-color-text">{{ tag }}</span>
        </span>
      </li>
      <li v-if="userInfoHeader?.identify" class="flex items-center">
        <span class="w-4 h-4 inline-block mr-2">
          <img class="w-full h-full" :src="userInfoHeader.identify.imageUrl" alt="">
        </span>
        <span v-for="(allAuthType, index) in userInfoHeader.profile.allAuthTypes" :key="allAuthType.type">
          <span >{{ allAuthType.desc }}</span>
          <span v-if="!(index === userInfoHeader.profile.allAuthTypes.length - 1)" class="ml-2 mr-2">/</span>
        </span>
      </li>
      <li class="attention grid grid-cols-3 text-center h-16  mt-2 mb-2">
        <div class="dynamic" :class="fanStyle" @click="editTypeAction(2)">
          <span>
            {{ userInfoHeader?.profile?.eventCount }}
          </span>
          <span>
            动态
          </span>
        </div>
        <div class="focusOn h-full " :class="fanStyle" @click="editTypeAction(0)">
          <span>{{ userInfoHeader?.profile?.follows }}</span>
          <span>关注</span>
        </div>
        <div class="fan h-full" :class="fanStyle" @click="editTypeAction(1)">
          <span>
            {{ userInfoHeader?.profile?.followeds }}
          </span>
          <span>
            粉丝
          </span>
        </div>
      </li>
      <li class="text-sm yu-titleColor">
        个人介绍：<span class="yu-color-text">{{ userInfoHeader?.profile?.signature }}</span>
      </li>
      <li class="text-sm yu-titleColor mt-2 mb-2" v-if="userInfoHeader?.profile?.privacyItemUnlimit?.area !== 0">
        所在地区：<span class="yu-color-text">{{ toCode(userInfoHeader?.profile?.province) }} - {{ toCode(userInfoHeader?.profile?.city) }}</span>
      </li>
      <li v-if="userInfoHeader?.profile?.privacyItemUnlimit?.age" class="text-sm yu-titleColor text-gray mt-2 mb-2">
        生日：<span class="mr-4 yu-color-text">{{timestampToYMD(userInfoHeader?.profile?.birthday) }}</span>
        年龄：<span class="yu-color-text">{{ getAge(userInfoHeader?.profile?.birthday) }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import YuButton from '@/components/YuButton/index.vue'
import {useStore} from "@/store/index";
import { toCode } from "@/utils/code/index";
import {timestampToYMD, getAge} from "@/utils/index";
import {reactive, toRefs} from "vue";
import router from "@/router/index";
import {setIsFollow} from "@/api/share/index";

const store = useStore()
const data = reactive({
  isAttention: false, // 是否取关
  fanStyle: 'flex flex-col items-center justify-center yu-textColor-hover cursor-pointer'
})
const { isAttention, fanStyle } = toRefs(data)

const props = defineProps({
  userInfoHeader: Object,
  myselfOrOther: Boolean,
  sharePopupRef: Object
})


// 如果关注了这个人，鼠标移动到已关注上面，会显示取消关注
const mousemove = () => {
  data.isAttention = true
}
// ，离开之后会显示关注时间
const mouseleave = () => {
  data.isAttention = false
}

const $emit = defineEmits(['getUserInfoFn', 'sendTextFn', 'editTypeAction'])
// 关注和取消关注
const attentionUser = () => {
  const {userInfoHeader: {profile: {userId, followed}}} = props
  // t:1关注 其他为取消关注
  setIsFollow({id: userId, t: followed ? 2 : 1}).then(res => {
    const {code} = res
    if (Number(code) === 200) $emit('getUserInfoFn')
  })
}
// 发送私信
const sendTextFn = () => {
  $emit('sendTextFn')
}

// 点击编辑资料跳转到编辑页面
const JumpUpdate = () => {
  router.push({
    path: '/user/update-info'
  })
}

// 修改右侧展示的类型是动态、粉丝，关注
const editTypeAction = (type) => {
  $emit('editTypeAction', type)
}

</script>

<style scoped>

</style>
